بث React: التصيير التدريجي من جانب الخادم لتحسين تجربة المستخدم

في عالم تطوير الويب، يعد تقديم تجربة مستخدم سريعة وسلسة أمرًا بالغ الأهمية. يتوقع المستخدمون أن يتم تحميل مواقع الويب بسرعة وأن تكون تفاعلية دون تأخير. تقدم React، وهي مكتبة JavaScript شهيرة لبناء واجهات المستخدم، تقنية قوية تسمى التصيير المتدفق من جانب الخادم (Streaming SSR) لمواجهة هذا التحدي. تتعمق هذه المقالة في مفهوم بث SSR في React، وتستكشف فوائده، وكيفية تنفيذه، وتأثيره على أداء موقع الويب وتجربة المستخدم.

ما هو التصيير من جانب الخادم (SSR)؟

يتضمن التصيير التقليدي من جانب العميل (CSR) قيام المتصفح بتنزيل ملفات HTML و JavaScript و CSS ثم تصيير المحتوى على جانب العميل. على الرغم من مرونته، يمكن أن يؤدي هذا النهج إلى تأخير في العرض الأولي، حيث يتعين على المستخدم انتظار تنزيل جميع الموارد وتنفيذ JavaScript قبل رؤية أي محتوى. من ناحية أخرى، يقوم التصيير من جانب الخادم (SSR) بتصيير مكونات React على الخادم وإرسال HTML المصيّر بالكامل إلى العميل. ينتج عن هذا وقت تحميل أولي أسرع، حيث يتلقى المتصفح HTML مكتمل التكوين يمكن عرضه على الفور.

محدودية التصيير التقليدي من جانب الخادم (SSR)

على الرغم من أن SSR التقليدي يقدم تحسينًا كبيرًا مقارنة بـ CSR، إلا أن له حدوده الخاصة. في SSR التقليدي، يجب تصيير التطبيق بأكمله على الخادم قبل إرسال أي HTML إلى العميل. يمكن أن يشكل هذا عنق زجاجة، خاصة للتطبيقات المعقدة ذات المكونات المتعددة والاعتماد على البيانات. يمكن أن يكون زمن أول بايت (TTFB) مرتفعًا، مما يؤدي إلى شعور المستخدم بالبطء.

إدخال بث SSR في React: نهج تدريجي

يتغلب بث SSR في React على قيود SSR التقليدي من خلال تبني نهج تدريجي. فبدلاً من انتظار تصيير التطبيق بأكمله على الخادم، يقوم بث SSR بتقسيم عملية التصيير إلى أجزاء أصغر وبث هذه الأجزاء إلى العميل فور جهوزيتها. يسمح هذا للمتصفح بالبدء في عرض المحتوى في وقت أبكر بكثير، مما يحسن الأداء الملموس ويقلل من زمن أول بايت (TTFB). فكر في الأمر كمطعم يُعد وجبتك على مراحل: تُقدم المقبلات أولاً، ثم الطبق الرئيسي، وأخيراً الحلوى، بدلاً من انتظار تجهيز الوجبة بأكملها دفعة واحدة.

فوائد بث SSR في React

يقدم بث SSR في React فوائد عديدة لأداء موقع الويب وتجربة المستخدم:

• زمن تحميل أولي أسرع: من خلال بث أجزاء HTML إلى العميل، يمكن للمتصفح البدء في عرض المحتوى في وقت مبكر جدًا، مما يؤدي إلى زمن تحميل محسوس أسرع وتحسين مشاركة المستخدم.
• تحسين زمن أول بايت (TTFB): يقلل بث SSR من زمن أول بايت عن طريق إرسال جزء HTML الأولي فور جهوزيته، بدلاً من انتظار تصيير التطبيق بأكمله.
• تجربة مستخدم محسنة: يؤدي زمن التحميل الأولي الأسرع إلى تجربة مستخدم أفضل، حيث لا يضطر المستخدمون إلى الانتظار حتى يظهر المحتوى.
• تحسين محركات البحث (SEO): يمكن لمحركات البحث الزحف إلى المحتوى وفهرسته بشكل أكثر فعالية، حيث أن HTML متاح بسهولة على الخادم.
• الترطيب التدريجي (Progressive Hydration): يتيح بث SSR الترطيب التدريجي، حيث يقوم كود React من جانب العميل بإرفاق مستمعي الأحداث تدريجيًا وجعل التطبيق تفاعليًا أثناء بث أجزاء HTML.
• تحسين استخدام الموارد: من خلال تقسيم عملية التصيير إلى أجزاء أصغر، يمكن لبث SSR تحسين استخدام الموارد على الخادم.

كيف يعمل بث SSR في React

يستفيد بث SSR في React من واجهة برمجة التطبيقات ReactDOMServer.renderToPipeableStream() لبث أجزاء HTML إلى العميل. تُرجع هذه الواجهة تيارًا قابلاً للقراءة يمكن توجيهه إلى كائن الاستجابة الخاص بالخادم. إليك توضيح مبسط لكيفية عمله:

1. يتلقى الخادم طلبًا لصفحة ما.
2. يستدعي الخادم ReactDOMServer.renderToPipeableStream() لتصيير تطبيق React في تيار.
3. يبدأ التيار في إصدار أجزاء HTML أثناء تصيير مكونات React.
4. يقوم الخادم بتوجيه التيار إلى كائن الاستجابة، مرسلاً أجزاء HTML إلى العميل.
5. يتلقى المتصفح أجزاء HTML ويبدأ في عرضها تدريجيًا.
6. بمجرد استلام جميع أجزاء HTML، يقوم المتصفح بترطيب تطبيق React، مما يجعله تفاعليًا.

تنفيذ بث SSR في React

لتنفيذ بث SSR في React، ستحتاج إلى خادم Node.js وتطبيق React. إليك دليل خطوة بخطوة:

1. إعداد خادم Node.js: قم بإنشاء خادم Node.js باستخدام إطار عمل مثل Express أو Koa.
2. تثبيت React و ReactDOMServer: قم بتثبيت حزم react و react-dom.
3. إنشاء تطبيق React: قم بإنشاء تطبيق React بالمكونات التي تريد تصييرها على الخادم.
4. استخدام ReactDOMServer.renderToPipeableStream(): في كود الخادم الخاص بك، استخدم واجهة ReactDOMServer.renderToPipeableStream() لتصيير تطبيق React الخاص بك في تيار.
5. توجيه التيار إلى كائن الاستجابة: قم بتوجيه التيار إلى كائن الاستجابة الخاص بالخادم لإرسال أجزاء HTML إلى العميل.
6. معالجة الأخطاء: قم بتنفيذ معالجة الأخطاء لالتقاط أي أخطاء قد تحدث أثناء عملية التصيير.
7. إضافة وسم script للترطيب: قم بتضمين وسم script في HTML لترطيب تطبيق React على جانب العميل.

مثال على مقتطف كود (جانب الخادم):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // مكون React الخاص بك

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // نقطة الدخول من جانب العميل
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
عذرًا، حدث خطأ ما
');
    }
  });

  setTimeout(abort, 10000); // اختياري: مهلة زمنية لمنع التعليق إلى أجل غير مسمى
});

app.use(express.static('public')); // لخدمة الأصول الثابتة

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

مثال على مقتطف كود (جانب العميل - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

مثال لمكون تطبيق React (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // محاكاة تأخير التحميل
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
مرحبًا بك في بث SSR!
      
هذا عرض توضيحي لبث SSR في React.
      جاري التحميل...
}>